<template>
<div class="paybox" v-if="paystatus">
    <img class="a" :src="img+'/10003.png'" alt="">
    <img class="aa" :src="img+'/10002.png'" alt="">
</div>
    <div class="container__" v-else>
        <div class="imgbox">
            <img class="posimg" :src="item.ad_thumb" alt="">
        </div>
        <div class="infobox">
            <div class="top">
                <img :src="img+'/pataner.png'" alt="">
                <div class="contai">
                    {{item.intro}}
                </div>
            </div>
            <div class="mid">
                <van-checkbox checked-color="#1A84FB" :value="flag" @change="Onchange">我已阅读并同意合伙人须知</van-checkbox>
            </div>
            <div class="button" @click="sbmit">我要成为</div>
        </div>

        <van-toast id="van-toast" />

        <van-popup custom-class="popupbox" :show="show" position="bottom">
            <div class="iner">
                <span class="close" @click="close">×</span>
                <span class="money">
                    <h3 class="lab">支付金额</h3>
                     <h3 class="mo">￥{{item.price}}</h3>
                </span>
                <span class="pay" @click="pay">立即支付</span>
            </div>
        </van-popup>
    </div>
</template>

<script>
// import swiper from '@/components/swiper'
import Toast from '../../../static/dist/toast/toast';

import {patanerinfo} from '@/api/my'
import {patanerbuy} from '@/api/my'
import {pay} from "@/utils/pay"
export default {

    data() {
        return {
            flag: false,
            show: false,
            item: {},
            paystatus: false,
            img:this.$URL.imgurl,
        }
    },
    methods: {
        Onchange(e) {
            this.flag = e.mp.detail
        },
        sbmit() {
            if (!this.flag) return Toast('请先阅读并同意合伙人须知');
            this.show = true 
            
           
        },
        close() {
            this.show = false
        },
        pay() {
            patanerbuy({id:this.item.id}).then(res=>{
                if(res.code==200){
                     pay(res.data).then(res=>{
                        this.show = false
                        this.paystatus = true 
                    })
                          
                }
            })
        }
       
    },
    
    created() {

    },
    onLoad(options) {
        Object.assign(this.$data, this.$options.data())
        
        patanerinfo({id:options.id}).then(res=>{
            if(res.code==200){
                this.item=res.data
            }
        })

    },
    onShow() {
        this.flag = false
        this.show = false
        this.paystatus = false
    }
}
</script>

<style lang="scss">
.paybox {
    min-height: 100vh;
    font-size: 16px;
    padding: 65px 15px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    .aa {
        height: 94px;
        width: 344px;
    }

    .a {
        height: 150px;
        width: 150px;
        margin-bottom: 20px;
    }
}

.container__ {
    background-color: #F4F5F5;
    min-height: 100vh;
    font-size: 16px;
    padding: 0 0 15px 0;
    box-sizing: border-box;

    .popupbox {
        .iner {
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            .close {
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                font-size: 30px;
                color: #666666;
                box-sizing: border-box;
                padding: 0 15px;
            }

            .money {
                height: 98px;
                box-sizing: border-box;
                padding: 0 15px;

                h3 {
                    width: 100%;
                    height: 50%;
                }

                .lab {
                    font-size: 15px;
                    font-weight: 500;
                    color: rgba(51, 51, 51, 1);
                }

                .mo {
                    font-size: 18px;
                    color: rgba(26, 132, 251, 1);
                    font-weight: bold;
                    text-align: right;
                }
            }

            .pay {
                width: 375px;
                height: 49px;
                background: rgba(26, 132, 251, 1);
                color: #fff;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;

            }
        }
    }

    .imgbox {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 135px;
        width: 100%;
        // overflow: hidden;
        // background: url('../../../static/images/11111.jpg') no-repeat;
        // background-size: contain;
        position: relative;

        .posimg {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            height: 135px;
            width: 100%;
        }

        span {
            font-size: 30px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            // color: #000;
            z-index: 1;
            padding: 0 39px;
            box-sizing: border-box;
            margin-bottom: 20px;
        }

        div {
            z-index: 1;
            font-size: 24px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            //  color: #000;
            box-sizing: border-box;
            padding: 0 67px;

            img {
                height: 19px;
                width: 19px;
                margin-right: 10px;
            }

            span {
                padding: 0;
            }
        }
    }

    .infobox {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
        .top {
            width: 345px;
            min-height: 344px;
            background: rgba(255, 255, 255, 1);
            border-radius: 10px;
            color: #333;
            font-size: 14px;
            margin-top: 10px;
            padding: 20px;
            box-sizing: border-box;
            // color: #f10;
        }

        .contai {
            margin-top: 20px;
        }

        img {
            height: 28px;
            width: 137px;
        }

        .mid {
            width: 345px;
            font-size: 12px;
            color: #333;
            height: 20px;
            margin: 20px 0 17px 0;
        }

        .button {
            width: 345px;
            height: 45px;
            background: #1A84FB;
            border-radius: 5px;
            color: #fff;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
